<!--  -->
<template>
  <div class="homePage">
    <div class="header">
      <p>宏烨找房</p>
      <div class="search">
        <span @click="goCity()">{{ city }}<van-icon name="arrow-down"/></span>
        <input type="text" v-model="value" placeholder="请输入区域/商圈" />
        <van-icon name="search" />
      </div>
      <!-- <van-search
        v-model="value"
        show-action
        :label="city ? city : '选择'"
        @click="goCity()"
        placeholder="请在这里输入区域/商圈"
        @search="onSearch"
        input-align="center"
        left-icon="arrow-down"
      >
        <template #action>
          <div @click="onSearch"><van-icon name="search" /></div>
        </template>
      </van-search> -->
    </div>
    <div class="content">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
      </van-swipe>
      <div class="menus">
        <ul>
          <li @click="gobuyHome()">
            <img src="../../../assets/买房.jpg" alt="" />
            买房
          </li>
          <li @click="goRenting()">
            <img src="../../../assets/租房.jpg" alt="" />
            租房
          </li>
          <li @click="goWanted()">
            <img src="../../../assets/求租.jpg" alt="" />
            求租
          </li>
          <li @click="goPurchase()">
            <img src="../../../assets/求购.jpg" alt="" />
            求购
          </li>
          <li @click="gofindHome()">
            <img src="../../../assets/地图找房.jpg" alt="" />
            地图找房
          </li>
          <li @click="goInformation()">
            <img src="../../../assets/资讯.jpg" alt="" />
            资讯
          </li>
          <li @click="gohomeMarket()">
            <img src="../../../assets/楼市圈.jpg" alt="" />
            楼市圈
          </li>
          <li @click="goBroker()">
            <img src="../../../assets/经纪人.jpg" alt="" />
            经纪人
          </li>
          <li @click="goGroup()">
            <img src="../../../assets/团购看房.jpg" alt="" />
            团购看房
          </li>
          <li @click="goLive()">
            <img src="../../../assets/直播看房.jpg" alt="" />
            直播看房
          </li>
        </ul>
      </div>
      <div class="consult">
        <div class="consult-top">
          <p>楼市资讯</p>
          <p>更&nbsp;多</p>
        </div>
        <div class="consult-bottom">
          <p
            v-for="(item, idx) in $store.state.realList"
            :key="idx"
            class="realList"
          >
            <span>TOP{{ item.id }}</span>
            {{ item.title }}
          </p>
        </div>
      </div>
      <div class="hotHome">
        <div class="hotHome-top">
          <p>热门楼盘</p>
          <p>更&nbsp;多</p>
        </div>
        <div class="hotHome-bottom">
          <dl
            v-for="(item, idx) in $store.state.hotList"
            :key="idx"
            class="hotList"
          >
            <dt><img :src="item.img" alt="" /></dt>
            <dd>
              <p>{{ item.title }}</p>
              <p>43平/2室 1厅/远洋新天地</p>
              <p>
                <span>{{ item.price }}万</span>
                <span>{{ item.num }}/m²</span>
              </p>
              <van-tag color="#ccc" text-color="#000" size="medium"
                >小区</van-tag
              >
            </dd>
          </dl>
        </div>
      </div>
      <div class="broker">
        <div class="broker-top">
          <p>经纪人</p>
          <p>更&nbsp;多</p>
        </div>
        <div class="broker-bottom">
          <dl
            v-for="(item, idx) in $store.state.brokerList"
            :key="idx"
            class="brokerList"
          >
            <dt>
              <img :src="item.img" alt="" />
            </dt>
            <dd>
              <p>{{ item.name }}</p>
              <p>{{ item.info }}</p>
              <button><van-icon name="chat" />&nbsp;咨询</button>
            </dd>
          </dl>
        </div>
      </div>
      <div class="banner">
        <img src="../../../assets/banner.jpg" alt="" />
      </div>
      <div class="resoldHome">
        <div class="resoldHome-top">
          <p>二手房</p>
          <p @click="goresoldHome()">更&nbsp;多</p>
        </div>
        <div class="resoldHome-bottom">
          <dl
            v-for="(item, idx) in list"
            :key="idx"
            class="resoldList"
            @click="goresoldDetail(item)"
          >
            <dt><img :src="item.img" alt="" /></dt>
            <dd>
              <p>{{ item.title }}</p>
              <p>43平/2室 1厅/远洋新天地</p>
              <p>
                <span>{{ item.price }}万</span>
                <span>{{ item.num }}/m²</span>
              </p>
              <van-tag color="#ccc" text-color="#000" size="medium"
                >小区</van-tag
              >
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from "vuex";
import { getResoldList } from "@/api";
export default {
  // 组件状态值
  data() {
    return {
      value: "",
      list: [],
    };
  },
  // 计算属性
  computed: {
    ...mapState(["city"]),
  },
  // 组件方法
  methods: {
    ...mapMutations(["GET_LIST"]),
    ...mapActions([
      "getRealList",
      "getHotList",
      "getBrokerList",
      "getResoldList",
    ]),
    //跳转到城市列表
    goCity() {
      this.$router.push("/city");
    },
    //搜索
    onSearch() {},
    //跳转到买房页面
    gobuyHome() {
      this.$router.push("/buyHome");
    },
    //跳转到租房页面
    goRenting() {
      this.$router.push("/renting");
    },
    //跳转到求租页面
    goWanted() {
      this.$router.push("/wanted");
    },
    //跳转到求购页面
    goPurchase() {
      this.$router.push("/purchase");
    },
    //跳转到地图找房页面
    gofindHome() {
      this.$router.push("/findHome");
    },
    //跳转到资讯页面
    goInformation() {
      this.$router.push("/information");
    },
    //跳转到楼市圈页面
    gohomeMarket() {
      this.$router.push("/homeMarket");
    },
    //跳转到经纪人页面
    goBroker() {
      this.$router.push("/broker");
    },
    //跳转到团购看房页面
    goGroup() {
      this.$router.push("/group");
    },
    //跳转到团购看房页面
    goLive() {
      this.$router.push("/live");
    },
    //跳转到二手房页面
    goresoldHome() {
      this.$router.push("/resoldHome");
    },
    //跳转到详情页页面
    goresoldDetail(item) {
      this.$router.push(`/resoldDetail/${item.id}`);
    },
    async getResoldList() {
      const res = await getResoldList({ value: this.value });
      console.log(res);
      this.list = res.data.data;
    },
  },
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    //获取楼市资讯数据
    this.getRealList();
    //获取热门楼盘数据
    this.getHotList();
    //获取经纪人数据
    this.getBrokerList();
    //获取二手房数据
    this.getResoldList();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang="scss" scoped>
.homePage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  width: 100%;
  background: #4381e6;
  padding: 0 5px;
  p {
    font-size: 20px;
    line-height: 60px;
    padding: 0 10px;
    color: #fff;
  }
  .search {
    width: 85%;
    height: 40px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    justify-content: space-around;
    margin-bottom: 10px;
    padding: 0 5px;
    span {
      font-size: 15px;
    }
    input {
      width: 200px;
      border: 0;
      font-size: 14px;
      text-align: center;
    }
  }
}
.content {
  flex: 1;
  overflow: auto;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.menus {
  width: 100%;
  margin-top: 10px;
  padding: 0 15px;
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 20%;
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 5px;
      img {
        width: 100%;
        padding: 10px;
      }
    }
  }
}
.consult {
  width: 100%;
  .consult-top {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    p:nth-child(1) {
      font-size: 20px;
      font-weight: bold;
    }
    p:nth-child(2) {
      font-size: 13px;
      font-weight: bold;
      color: #999;
    }
  }
  .consult-bottom {
    margin: 0 20px;
    border: 1px solid #ccc;
    height: 114px;
    // overflow-y: auto;
    overflow: hidden;
    .realList {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
      margin: 5px 0;
      padding: 3px;

      span {
        font-size: 14px;
        padding: 2px;
        color: #fff;
        background: red;
        margin-right: 5px;
      }
    }
  }
}
.hotHome {
  width: 100%;
  .hotHome-top {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    p:nth-child(1) {
      font-size: 20px;
      font-weight: bold;
    }
    p:nth-child(2) {
      font-size: 13px;
      font-weight: bold;
      color: #999;
    }
  }
  .hotHome-bottom {
    height: 480px;
    // overflow-y: auto;
    overflow: hidden;
    .hotList {
      width: 100%;
      display: flex;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 20px;
      margin: 10px 0;
      line-height: 20px;
      img {
        width: 100px;
        height: 81px;
        margin-right: 5px;
        // border: 1px solid #000;
      }
      p:nth-child(1) {
        font-weight: bold;
      }

      p:nth-child(2) {
        font-size: 12px;
      }
      p:nth-child(3) {
        span:nth-child(1) {
          color: orange;
          margin-right: 10px;
        }
      }
    }
  }
}
.broker {
  width: 100%;
  display: flex;
  flex-direction: column;
  .broker-top {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    p:nth-child(1) {
      font-size: 20px;
      font-weight: bold;
    }
    p:nth-child(2) {
      font-size: 13px;
      font-weight: bold;
      color: #999;
    }
  }
  .broker-bottom {
    width: 100%;
    display: flex;
    // overflow: hidden;
    overflow-x: auto;
    .brokerList {
      width: 31%;
      height: 170px;
      border: 1px solid #ccc;
      margin: 5px 10px;
      padding: 0 20px;
      text-align: center;
      box-shadow: 0 0 10px 3px #999;
      img {
        width: 70px;
      }
      p:nth-child(1) {
        font-size: 20px;
        font-weight: bold;
      }
      p:nth-child(2) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        color: #999;
      }
      button {
        width: 70px;
        height: 30px;
        background: orange;
        border: 0;
        border-radius: 20px;
        color: #fff;
        margin-top: 5px;
      }
    }
  }
}
.banner {
  width: 100%;
  padding: 0 15px;
  margin: 10px 0;
  img {
    width: 100%;
  }
}
.resoldHome {
  width: 100%;
  .resoldHome-top {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    p:nth-child(1) {
      font-size: 20px;
      font-weight: bold;
    }
    p:nth-child(2) {
      font-size: 13px;
      font-weight: bold;
      color: #999;
    }
  }
  .resoldHome-bottom {
    height: 380px;
    // overflow-y: auto;
    overflow: hidden;
    .resoldList {
      width: 100%;
      display: flex;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 20px;
      margin: 10px 0;
      line-height: 20px;
      img {
        width: 100px;
        height: 81px;
        margin-right: 5px;
        // border: 1px solid #000;
      }
      p:nth-child(1) {
        font-weight: bold;
        margin-right: 10px;
      }

      p:nth-child(2) {
        font-size: 12px;
      }
      p:nth-child(3) {
        span:nth-child(1) {
          color: orange;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
